<template>
  <div >
    <a-tabs
      tabPosition="top"
      size="large"
      type="card"
      v-model:activeKey="activeKey"
      @change="handleSelect"
    >
      <a-tab-pane v-for="type in cuisineTypeList" :key="type.id" :tab="type.name" />
    </a-tabs>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, watchEffect } from 'vue';
  import { getListAll } from '/@/api/cuisine/cuisineType';
  import { Tabs } from 'ant-design-vue';

  export default defineComponent({
    name: 'CuisineTypeList',
    emits: ['selectType'],
    setup(_, { emit }) {
      onMounted(() => {
        fetch();
      });

      let activeKey = ref(0);
      let cuisineTypeList = ref([]);

      async function fetch() {
        cuisineTypeList.value = await getListAll({ type: 1 });
        console.log(cuisineTypeList.value);
      }

      function handleSelect(id: string) {
        emit('selectType', id);
      }

      return { activeKey, cuisineTypeList, handleSelect };
    },
  });
</script>

<style scoped></style>
